<html>
<head>
<script  type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script  type="text/javascript" src="../src/jquery.selectboxutils.js"></script>
<style type="text/css">
<!--
Body {
	padding : 10px;
}
h1 { }
h2 { 
	border-bottom:1px solid #00008B;
	border-left:5px solid #00008B;
	padding-bottom : 3px;
	padding-left : 3px;
	}
pre { border:1px solid #999999;background-color:#FFFAF0;padding:5px}
.exec{
	margin:0px 0px 10px 0px;
}
-->
</style>

<title>jQuery plugin --- selectbox-utils Demo page</title>
<script type="text/javascript">
$(function(){
});
</script>
</head>

<body>
<h1>jQuery plugin --- selectbox-utils Demo page</h1>
<h2>numericOptions</h2>

<h3>Using date pulldown</h3>
<div>
<pre id="code_001">
	$('#year').numericOptions({from:2007,to:2011});
	$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});
	$('#date').numericOptions({valuePadding:2});
</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_001').text());"><br/>
<select id="year"></select>
<select id="month"></select>
<select id="date"></select>
</div>

<h3>class name designation</h3>
<div>
<pre id="code_002">
	$('select.hoge').numericOptions({from:2007,to:2010});
</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_002').text());"><br/>
<select class="hoge"></select>
<select class="hoge"></select>
</div>

<h3>Set not numeric labels</h3>
<div>
<pre id="code_003">
	$('#year2').numericOptions({from:2007,to:2011});
	var letters = ['Jan','Feb','Mar','Apl','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
	$('#month2').numericOptions({from:1,to:12,selectedIndex:5,labels:letters});
	$('#date2').numericOptions();
</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_003').text());"><br/>
<select id="year2"></select>
<select id="month2"></select>
<select id="date2"></select>
</div>

<h3>Set exclude parameter</h3>
<div>
<pre id="code_004">
	var letters2 = ['Jan','Apl','Jun','Jul','Aug','Sep','Nov','Dec'];
	$('#month4').numericOptions({from:1,to:12,selectedIndex:5,labels:letters2,exclude:[2,3,5,10]});
</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_004').text());"><br/>
<select id="month4"></select>
</div>

<h3>Set startLabel parameter</h3>
<div>
<pre id="code_006">
	var letters = ['Jan','Feb','Mar','Apl','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
	$('#month6').numericOptions({from:1,to:12,labels:letters,startLabel:['select month','']});
</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_006').text());"><br/>
<select id="month6"></select>
</div>

<h2>datePulldown</h2>
<p>You can't select invalid date,like 2008/4/31 and 2007/2/29.</p>
<div>
<pre id="code_005">
	$('#year1').numericOptions({from:2007,to:2011});
	$('#month1').numericOptions({from:1,to:12});
	$('#date1').numericOptions().datePulldown({year:$('#year1'),month:$('#month1')});

	$('#year3').numericOptions({from:2007,to:2011});
	var letters = ['Jan','Feb','Mar','Apl','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];	
	$('#month3').numericOptions({from:1,to:12,labels:letters});
	$('#date3').numericOptions().datePulldown({year:$('#year3'),month:$('#month3')});

</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_005').text());"><br/>
<select id="year1"></select>
<select id="month1"></select>
<select id="date1"></select>
<br/>
<select id="year3"></select>
<select id="month3"></select>
<select id="date3"></select>
</div>

<h2>options</h2>

<h3>Get options</h3>
<div>
<pre id="code_006">
	//All options under #test1
	$('#test1').options().each(
		function(){
			$('#code_006_result').text($('#code_006_result').text()+'/'+$(this).val());
		});
</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_006').text());"><br/>
<select id="test1"><option value="hoge">hoge</option><option value="moge">moge</option></select>
<div id="code_006_result"></div>

<pre id="code_007">
	//Get one option by Index
	$('#code_007_result').text($('#test2').options(0).text());
</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_007').text());"><br/>
<select id="test2"><option value="hoge">hoge</option><option value="moge">moge</option></select>
<div id="code_007_result"></div>

<h3>Set options</h3>
<div>
<pre id="code_008">
	var op = [['dog','1'],['cat','2'],['bird','3']];
	$('#test3').options(op);
</pre>
<input type="button" class="exec" value="execute code" onclick="eval($('#code_008').text());"><br/>
<select id="test3"><option value="hoge">hoge</option><option value="moge">moge</option><option value="hoge">hoge</option><option value="moge">moge</option></select>

</div>

</body>
</html>